<template>
    <!-- 免费课程 -->
    <div class="freeclass">
        <!-- 标题 -->
        <div class="freeclass_title">
            <div class="freeclass_title_1">{{title}}</div>
            <div class="freeclass_title_2"><span>
                更多
            </span>
                <img src="../../assets/images/more.png" alt=""></div>
        </div>
        <div style="clear: both;"></div>
        <!-- 内容 -->
        <div class="freeclass_content">
            <ul class="freeclass_content_top">
                <router-link tag="li" class="freeclass_content_top_one" v-for="(item,index) in list" :key="index" :to="'/Other/'+item.courseId+'/'+item.learningNum">
                    <img :src=item.coverFileUrl alt="">
                    <div>{{item.courseTitle}}</div>
                    <div v-if="item.isFree == 1">
                        <div>共
                            <span>{{Number(item.subSectionNum)}}</span>
                            节课|
                            <span>{{item.learningNum}}</span>
                            人报名
                        </div>
                        <div style="color: #00cf8c;font-size: 16px">免费</div>
                    </div>
                    <div v-else-if="item.isFree == 0">
                        <div>
                            共
                            <span>{{Number(item.subSectionNum)}}</span>
                            节课|
                            <span>{{item.learningNum}}</span>
                            人报名
                        </div>
                        <div>
                            <div style="float: left">
                                <span style="font-size: 16px;color: #ff4500">&yen;99.9</span>
                                <span style="margin-left: 5px"><s>&yen;800</s></span>
                            </div>
                            <div style="color: #fa8c16;
                                        background: #fff7e6;
                                        border:1px solid #ffd591;
                                        float:right;
                                         padding:0px 5px;font-size: 12px">限时钜惠
                            </div>
                        </div>
                    </div>
                </router-link>
            </ul>

        </div>
        <!-- 清除浮动 -->
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    import {getCourse} from '../../api/Tlmusic'


    export default {
        name: "FreeCourse",
        data() {
            return {
                // type:'free',
                // pageNum:1,
                // pageSize:10,
                list: [{}],

            }

        },
        props: {
            type: {
                type: [String, Number]
            },
            title: {
                type: String
            },
            pageNum: {
                type: [String, Number]
            },
            pageSize: {
                type: [String, Number]
            },
        },
        created() {
            getCourse(this.type, this.pageNum, this.pageSize).then(res => {
                // console.log(res)
                this.list = res.rows
                // console.log(this.list)

            })
        }
    }
</script>

<style scoped>
    /* 免费课程 */
    .freeclass {
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;
    }

    /*免费收费样式*/


    /* 标题 */
    .freeclass_title {
        position: relative;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 15px;
    }

    .freeclass_title_1 {
        text-align: center;
        font-size: 26px;
    }

    .freeclass_title_2 {
        position: absolute;
        font-size: 12px;
        top: 10px;
        right: 0px;
        color: #cccccc;
    }

    .freeclass_title_2 > img {
        width: 30%;
    }

    /* 内容 */
    .freeclass_content {
        width: 98%;
        font-size: 12px;
        margin: 0 auto;
        margin-top: 15px;
    }

    /* 内容第一行 */

    .freeclass_content_top > li {
        float: left;
        width: 18.8%;
        margin-left: 1%;
        cursor: pointer;

    }

    .freeclass_content_top > li:hover {
        color: #00cf8c;
    }

    .freeclass_content_top > li:nth-of-type(1), .freeclass_content_top > li:nth-of-type(6) {
        margin-left: 0px;
    }

    .freeclass_content_top > li:nth-of-type(6), .freeclass_content_top > li:nth-of-type(7), .freeclass_content_top > li:nth-of-type(8), .freeclass_content_top > li:nth-of-type(9), .freeclass_content_top > li:nth-of-type(10) {
        margin-top: 20px;
    }

    .freeclass_content_top > li > img {
        width: 100%;
        height: 126.92px;
    }

    .freeclass_content_top > li > div {
        margin-top: 10px;
    }

    .freeclass_content_top > li > div:nth-of-type(2) {
        color: #888888;
    }

    .freeclass_content_top > li > div:nth-of-type(3) {
        color: #00cf8c;
    }
</style>